<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单控件写在表单元素中 form action提交用户信息的服务器地址-->
    <form action="test.php" method="post">
        <!-- 明文输入框 -->
        用户名：<input type="text">
        <!-- 暗文输入框 -->
        密码：<input type="password"><br>
        <!-- <br>强制换行标签 -->
        性别：
        <!-- 点击文字 单选按钮或者输入框聚焦label for属性值和input id值一致 -->
        <label for="list">
            男：<input type="radio" checked name="gender" value="male" id="list">
        </label>

        <label>
            女：<input type="radio" name="gender" value="female">
        </label><br>
        <!-- radio单选按钮 -->
        <!-- checkbox多选按钮 -->
        <!-- name保存属性名 -->
        <!-- checked设置单选按钮和复选框默认选中 -->
        爱好：
        游泳：<input type="checkbox" name="hobbies" value="swiming">
        蓝球：<input checked type="checkbox" name="hobbies" value="basketball">
        足球：<input type="checkbox" name="hobbies" value="football"><br>
        城市：
        <!-- select下拉框 option下拉选框-->
        <select name="city">
            <optgroup label="一线城市">
                <option value="lanzhou">兰州</option>
                <option value="tianshui">天水</option>
                <option value="baiyin" selected>白银</option>
                <!-- 对下拉选项分组 -->
            </optgroup>
            <optgroup label="二线城市" disabled>
                <!-- disabled禁用选项 -->
                <!--selected默认选项 -->
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="guangzhou">广州</option>
                <!-- 对下拉选项分组 -->
            </optgroup>

        </select><br>
        <!-- cols列 -->
        <!-- rows行 -->
        <!-- textarea描述区域 -->
        描述：<textarea name="des" cols="30" rows="10"></textarea><br>
        生日:<input type="datetime-local">
        日期：<input type="date"><br>
        文件上传:input:<input type="file"><br>
        滑块:<input type="range" min="0" max="100" step="10"><br>
        颜色取色器: <input type="color"><br>
        进度条：<progress min="0" max="100" value="70"></progress><br>
        <!-- 表单提交按钮 -->
        <input type="submit" value="提交">

    </form>

</body>

</html>
